<template>
<div class="chat-navigation">
    <van-nav-bar :title="title" left-arrow @click-left="goBack">
        <template #right>
            <div class="nav-right-actions">
                <van-icon :name="isDetail ? 'chat-o' : 'search'" size="20" @click.stop="toggleView" />
                <van-icon name="ellipsis" size="20" @click.stop="showInfo" />
            </div>
        </template>
    </van-nav-bar>
</div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
    name: 'ChatNavigation',
    props: {
        title: {
            type: String,
            required: true
        },
        chatId: {
            type: String,
            required: true
        },
        isDetail: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        goBack() {
            this.$emit('back')
        },
        toggleView() {
            this.$emit('toggle-view')
        },
        showInfo() {
            this.$emit('show-info')
        }
    }
})
</script>

<style scoped>
.chat-navigation {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
}

.nav-right-actions {
    display: flex;
    align-items: center;
}

.nav-right-actions .van-icon {
    margin-left: 15px;
}
</style>